<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<c:set var="year" value="${requestScope.member.birthday}"/>
<script type="text/javascript">
// 생년월일
$(document).ready(function(){
	$("#birth_year").val("${fn:substring(year,0,4)}");
	if("${fn:substring(year,4,5)}"== "0"){
		$("#birth_month").val("${fn:substring(year,5,6)}");
	}else{
		$("#birth_month").val("${fn:substring(year,4,6)}");	
	}
	if("${fn:substring(year,6,7)}" == "0"){
		$("#birth_day").val("${fn:substring(year,7,8)}");
	}else{
		$("#birth_day").val("${fn:substring(year,6,8)}");	
	}
});
function getDateForDisplay(){
	var date = ${sessionScope.login_info.regist_date};
	date = date.toString(10);
	var dateText = document.createTextNode((date.substring(0,4)+"."+date.substring(4,6)+"."+date.substring(6,8)));
	var td1 = document.getElementById("date");
	td1.appendChild(dateText);
};
function chkinput(){
	if(document.update_form.member_id.value==""){
		alert("Id is empty!");
		document.update_form.member_id.focus();
		return false;
	}
	if(document.update_form.member_password.value==""){
		alert("Password is empty!");
		document.update_form.member_password.focus();
		return false;
	}
	if(document.update_form.first_name.value==""){
		alert("First name is empty!");
		document.update_form.first_name.focus();
		return false;
	}
	if(document.update_form.last_name.value==""){
		alert("Last name is empty!");
		document.update_form.last_name.focus();
		return false;
	}
	if(document.update_form.birth_year.value==''){
		alert("Year is empty!");
		document.update_form.birth_year.focus();
		return false;
	}
	if(document.update_form.birth_month.value==""){
		alert("Month is empty!");
		document.update_form.birth_month.focus();
		return false;
	}
	if(document.update_form.birth_day.value==""){
		alert("Day is empty!");
		document.update_form.birth_day.focus();
		return false;
	}
	var fileName = document.update_form.upfile.value;
	var ext = fileName.subString(fileName.lastIndexof(".")+1);
	if(ext!="jpg"&&ext!="png"&&ext!="jpeg"&&ext!="bmp"&&ext!="gif"){
		alert("Just available uploas image file!");
		return false;
	}
}
</script>
<body onload="getDateForDisply(),getBirth()">
	<form name="update_form" action="member_update_done.do" method="post" enctype="multipart/form-data" onsubmit="return chkinput()">
	<table>
		<tr>
		<td valign="top">
		<table>
			<tr>
				<td>
					<img src="/${initParam.context_root }/member_picture/${requestScope.member.picture_filename}" width="250px" height="300px"><br>
				</td>
			</tr>
			<tr>
				<td><input type="file" name="upfile" width="100px"></td>
			</tr>
			<tr>
				<td width="100">id : ${requestScope.member.member_id}</td>
			</tr>
		</table>
		</td>
		
		<td valign="top">
		<table width="400px">
			<tr> 
				<td width="300" height="45" >
				password : <input type="password" name="member_password">
				</td>
			</tr>
			<tr>
				<td width="300" height="45" >
				first_name : <input type="text" name="first_name" value="${requestScope.member.first_name}"> 
				</td>
			</tr>
			<tr>
				<td width="300" height="45" >
				last_name : <input type="text" name="last_name" value="${requestScope.member.last_name }">
				</td>
			</tr>
			<tr>
				<td width="300" height="45">
					Gender : 
					<c:choose>
						<c:when test="${requestScope.member.member_gender == 'm'}">
							male <input type="radio" name="member_gender" value="m" checked="checked">
							female <input type="radio" name="member_gender" value="f" >
						</c:when>
						<c:otherwise> 
						 	male <input type="radio" name="member_gender" value="m" >
							female <input type="radio" name="member_gender" value="f" checked="checked">
					 	</c:otherwise>
				 	</c:choose>
				</td>
			</tr>
			<tr>
				<td width="300" height="45">
				birthday :
				<select id="birth_year" name="birth_year" style="width: 70px">
					<option value=''>year</option>
						<option value='2012'>2012</option>
						<option value='2011'>2011</option>
						<option value='2010'>2010</option>
						<option value='2009'>2009</option>
						<option value='2008'>2008</option>
						<option value='2007'>2007</option>
						<option value='2006'>2006</option>
						<option value='2005'>2005</option>
						<option value='2004'>2004</option>
						<option value='2003'>2003</option>
						<option value='2002'>2002</option>
						<option value='2001'>2001</option>
						<option value='2000'>2000</option>
						<option value='1999'>1999</option>
						<option value='1998'>1998</option>
						<option value='1997'>1997</option>
						<option value='1996'>1996</option>
						<option value='1995'>1995</option>
						<option value='1994'>1994</option>
						<option value='1993'>1993</option>
						<option value='1992'>1992</option>
						<option value='1991'>1991</option>
						<option value='1990'>1990</option>
						<option value='1989'>1989</option>
						<option value='1988'>1988</option>
						<option value='1987'>1987</option>
						<option value='1986'>1986</option>
						<option value='1985'>1985</option>
						<option value='1984'>1984</option>
						<option value='1983'>1983</option>
						<option value='1982'>1982</option>
						<option value='1981'>1981</option>
						<option value='1980'>1980</option>
						<option value='1979'>1979</option>
						<option value='1978'>1978</option>
						<option value='1977'>1977</option>
						<option value='1976'>1976</option>
						<option value='1975'>1975</option>
						<option value='1974'>1974</option>
						<option value='1973'>1973</option>
						<option value='1972'>1972</option>
						<option value='1971'>1971</option>
						<option value='1970'>1970</option>
						<option value='1969'>1969</option>
						<option value='1968'>1968</option>
						<option value='1967'>1967</option>
						<option value='1966'>1966</option>
						<option value='1965'>1965</option>
						<option value='1964'>1964</option>
						<option value='1963'>1963</option>
						<option value='1962'>1962</option>
						<option value='1961'>1961</option>
						<option value='1960'>1960</option>
						<option value='1959'>1959</option>
						<option value='1958'>1958</option>
						<option value='1957'>1957</option>
						<option value='1956'>1956</option>
						<option value='1955'>1955</option>
						<option value='1954'>1954</option>
						<option value='1953'>1953</option>
						<option value='1952'>1952</option>
						<option value='1951'>1951</option>
						<option value='1950'>1950</option>
						<option value='1949'>1949</option>
						<option value='1948'>1948</option>
						<option value='1947'>1947</option>
						<option value='1946'>1946</option>
						<option value='1945'>1945</option>
						<option value='1944'>1944</option>
						<option value='1943'>1943</option>
						<option value='1942'>1942</option>
						<option value='1941'>1941</option>
						<option value='1940'>1940</option>
						<option value='1939'>1939</option>
						<option value='1938'>1938</option>
						<option value='1937'>1937</option>
						<option value='1936'>1936</option>
						<option value='1935'>1935</option>
						<option value='1934'>1934</option>
						<option value='1933'>1933</option>
						<option value='1932'>1932</option>
						<option value='1931'>1931</option>
						<option value='1930'>1930</option>
						<option value='1929'>1929</option>
						<option value='1928'>1928</option>
						<option value='1927'>1927</option>
						<option value='1926'>1926</option>
						<option value='1925'>1925</option>
						<option value='1924'>1924</option>
						<option value='1923'>1923</option>
						<option value='1922'>1922</option>
						<option value='1921'>1921</option>
						<option value='1920'>1920</option>
						<option value='1919'>1919</option>
						<option value='1918'>1918</option>
						<option value='1917'>1917</option>
						<option value='1916'>1916</option>
						<option value='1915'>1915</option>
						<option value='1914'>1914</option>
						<option value='1913'>1913</option>
						<option value='1912'>1912</option>
						<option value='1911'>1911</option>
						<option value='1910'>1910</option>
						<option value='1909'>1909</option>
						<option value='1908'>1908</option>
						<option value='1907'>1907</option>
						<option value='1906'>1906</option>
						<option value='1905'>1905</option>
						<option value='1904'>1904</option>
						<option value='1903'>1903</option>
						<option value='1902'>1902</option>
						<option value='1901'>1901</option>
						<option value='1900'>1900</option>
				</select> 
				<select id="birth_month" name="birth_month" style="width: 60px">
					<option value=''>month</option>
							<option value='1'>1</option>
							<option value='2'>2</option>
							<option value='3'>3</option>
							<option value='4'>4</option>
							<option value='5'>5</option>
							<option value='6'>6</option>
							<option value='7'>7</option>
							<option value='8'>8</option>
							<option value='9'>9</option>
							<option value='10'>10</option>
							<option value='11'>11</option>
							<option value='12'>12</option>					
					</select>
					<select id="birth_day" name="birth_day" style="width: 60px">
							<option value=''>day</option>
							<option value='1'>1</option>
							<option value='2'>2</option>
							<option value='3'>3</option>
							<option value='4'>4</option>
							<option value='5'>5</option>
							<option value='6'>6</option>
							<option value='7'>7</option>
							<option value='8'>8</option>
							<option value='9'>9</option>
							<option value='10'>10</option>
							<option value='11'>11</option>
							<option value='12'>12</option>
							<option value='13'>13</option>
							<option value='14'>14</option>			
							<option value='15'>15</option>
							<option value='16'>16</option>
							<option value='17'>17</option>
							<option value='18'>18</option>
							<option value='19'>19</option>
							<option value='20'>20</option>
							<option value='21'>21</option>
							<option value='22'>22</option>
							<option value='23'>23</option>
							<option value='24'>24</option>
							<option value='25'>25</option>
							<option value='26'>26</option>
							<option value='27'>27</option>
							<option value='28'>28</option>
							<option value='29'>29</option>
							<option value='30'>30</option>
							<option value='31'>31</option>
					</select>
				</td>	
			</tr>
			<tr>
				<td width="300" height="45">
				phone number : <input type="text" name="phone_no" value="${requestScope.member.phone_no}">
				</td>
			</tr>
			<tr>
				<td width="300" height="45">
				address : <input type="text" name="address" value="${requestScope.member.address}">
				</td>
			</tr>
		</table>
		</td>
		</tr>
		<tr>
		<td><input type="image" src="./img/save.PNG"></td>
		</tr>
	</table>
	</form>
</body>
</html>